antd Table组件的插槽使用

#antd Table组件的插槽使用| 来源: 网络整理| 查看: 265

在这里插入图片描述对于table里每一列的数据，根据接口返回，有的时候接口只返回纯数据或者类型，前端还要进行处理。当然有很多种方法， 1.在拿到数据后直接用map方法，改变原本的数据，data-source修改绑定的数据。 2.使用scopedSlots: { customRender: 'upCapacity' }插槽，在渲染template的时候修改。

const columns = [ { title: '存储类型', dataIndex: 'storage' }, { title: '容量范围', dataIndex: 'upCapacity', scopedSlots: { customRender: 'upCapacity' } }, { title: '按量价格', dataIndex: 'hourGFee' , customRender: text => { return text+'元/1GIB/小时' } } ] {{record.lowCapacity+'gib'+'-'+record.upCapacity+'gib'}}

3.直接在columns里的时候改。

const columns = [ { title: '镜像名称', dataIndex: 'name' }, { title: '镜像大小', dataIndex: 'capacity' }, { title: '云盘属性', dataIndex: 'diskType', customRender: text => { let result = '' switch (text) { case 0: result = '系统盘' break case 1: result = '数据盘' break } return result } }, { title: '创建时间', dataIndex: 'createTime' }, { title: '状态', dataIndex: 'status', customRender: text => { let result = '' switch (text) { case 0: result = '处理中' break case 1: result = '正常' break case 2: result = '异常' break case 3: result = '欠费' break case 4: result = '未付款' break case 5: result = '付款未创建' break case 6: result = '已删除' break } return result } }, { title: '架构', dataIndex: 'archType' }, { title: '站点', dataIndex: 'stationName' }, { title: '操作', align: 'center', scopedSlots: { customRender: 'action' } } ]

【本文地址】

公司简介

联系我们